
<template>
    <div>
        <el-dialog
                :title="title"
                :close-on-click-modal="false"
                v-dialogDrag
                :visible.sync="editVisible"
        >
            <el-form
                    v-loading="loading"
                    label-width="150px"
                    ref="editForm"
                    :model="editForm">

                            <el-form-item label="源货物目录:" prop="sourceCategoryId" :rules="[
                              {required: true, message:'请选择源货物目录', trigger:'blur'}
                             ]">
                              <section style="width:230px">
                                <treeselect class="treeselect-adjust" size="small" :disable-branch-nodes="true" v-model="editForm.sourceCategoryId"  :multiple="false" :options="options" placeholder="请选择源货物目录" :normalizer="sourceNormalizer"/>
                              </section>
                            </el-form-item>
                            <el-form-item label="源货物:" prop="sourceProductId" :rules="[
                              {required: true, message:'请输入源货物', trigger:'blur'}
                             ]">
                              <el-autocomplete placeholder="请输入源货物" size="small" @blur.stop="saveLocal($event.target.value)"  :debounce="0" :fetch-suggestions="sourceProductSearch"   @select="sourceHandleSelect($event)" :trigger-on-focus="false" v-model="editForm.sourceProductName"
                                               >
                                <template slot-scope="{ item }">

                                  <section class="querySearch-autocomplete card">
                                    <section class="name-item">
                                      <section class="name"><span v-if="item.name">{{ item.name.substr(0,1) }}</span></section>
                                      {{ item.name}}
                                    </section>
                                  </section>

                                  <div></div>
                                </template>
                              </el-autocomplete>
                            </el-form-item>
                            <el-form-item label="目标货物目录:" prop="targetCategoryId" :rules="[
                              {required: true, message:'请选择目标货物目录', trigger:'blur'}
                             ]">
                              <section style="width:230px">
                                <treeselect class="treeselect-adjust" size="small" :disable-branch-nodes="true" v-model="editForm.targetCategoryId"  :multiple="false" :options="options" placeholder="请选择目标货物目录" :normalizer="targetNormalizer"/>
                              </section>
                            </el-form-item>
                            <el-form-item label="目标货物:" prop="targetProductId" :rules="[
                              {required: true, message:'请输入目标货物', trigger:'blur'}
                             ]">
                              <el-autocomplete placeholder="请输入目标货物" size="small" @blur.stop="saveLocal($event.target.value)"  :debounce="0" :fetch-suggestions="targetProductSearch"   @select="targetHandleSelect($event)" :trigger-on-focus="false" v-model="editForm.targetProductName"
                              >
                                <template slot-scope="{ item }">

                                  <section class="querySearch-autocomplete card">
                                    <section class="name-item">
                                      <section class="name"><span v-if="item.name">{{ item.name.substr(0,1) }}</span></section>
                                      {{ item.name}}
                                    </section>
                                  </section>

                                  <div></div>
                                </template>
                              </el-autocomplete>
                            </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <div class="footer-input">
          <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick
          >确定</el-button
          >
        <el-button size="small" @click="close()">取消</el-button>

        </div>

      </span>
        </el-dialog>
    </div>
</template>
<script>
    import {save, getById, getTreeData,getSearchProductlist} from '@/api/product/mapping/ProductMapping.js';
    import Treeselect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
    export default {
        components: {
          Treeselect
        },
        data () {
            return {
                loading: false,
                areaLabel: {},
                method: '',
                options: [],
                title: '',
                editForm: {
                  id: '',
                  sourceCategoryId: null,
                  sourceProductId: '',
                  sourceProductName:'',
                  targetCategoryId: null,
                  targetProductId: '',
                  targetProductName:''
                },
                editVisible: false,
                detailsVisible: false,
                tableData1: [],
                page: {
                    pageSize: 10,
                    pageNo: 1,
                    total: 0
                },
                props: 1,
                dialogVisible: false,
                query: ''
            }
        },
        methods: {
            select (e) {
                this.editForm.companyName = e.names
                this.editForm.companyId = e.id
                this.dialogVisible = false
                console.log(e)
            },
            init (method, obj) {
                if (method === 'add') {
                    this.editVisible = true
                    this.$nextTick(() => {
                        this.$refs.editForm.resetFields()
                        // this.editForm = {}
                    })
                            this.editForm.id = ''
                            this.editForm.sourceCategoryId = null
                            this.editForm.sourceProductId = ''
                            this.editForm.targetCategoryId = null
                            this.editForm.targetProductId = ''
                            this.editForm.sourceProductName = ''
                            this.editForm.targetProductName = ''
                    this.title = '新增货物映射关系'
                    this.visible = true
                    this.loading = false
                } else if (method === 'edit') {
                    this.editVisible = true
                    this.method = method
                    this.title = '修改货物映射关系'
                    console.log(obj.id)
                    this.$set(this.editForm, 'id', obj.id);
                    this.$nextTick(() => {
                        this.loading = true
                        if (method === 'edit' || method === 'view') { // 修改或者查看
                            getById({id: this.editForm.id}).then((res) => {
                                if (res.data.code === '200') {
                                    this.editForm = res.data.result
                                    this.editForm.targetProductName = res.data.result.targetProName
                                    this.editForm.sourceProductName = res.data.result.sourceProName
                                    this.loading = false
                                } else {
                                    this.loading = false
                                    this.visible = false
                                    this.$message({
                                        type: 'error',
                                        message: res.data.message
                                    })
                                }
                            })
                        }
                    })
                    this.visible = true
                    this.loading = false
                }

            },
          sourceNormalizer (node) {
            return {
              id: node.id,
              label: node.name,
              children: node.children
            }
          },
          targetNormalizer (node) {
            return {
              id: node.id,
              label: node.name,
              children: node.children
            }
          },
          getTreeData (id,types) {
            getTreeData({ id: id,types: types }).then((res) => {
              if (res.data.code === '200') {
                console.log(res.data.result)
                this.options = res.data.result
                this.exec(this.options)
                console.log(this.options)
              }
            })
          },
          //递归删除空数组
          exec(array) {
            array.forEach(item => {
              if (item.children.length === 0) {
                delete item.children
              } else {
                this.exec(item.children)
              }
            })
          },
          saveLocal (val) {
          },
          // 输入后匹配输入建议
          sourceProductSearch (queryString, cb) {
            if (queryString) {
              getSearchProductlist({
                selectValue: queryString,
                categoryId: this.editForm.sourceCategoryId
              }).then((res) => {
                if (res.data.code === '200') {
                  this.values = []
                  for (let index = 0; index < res.data.result.length; index++) {
                    const elementProduct = {
                      name: '',
                      id: ''
                    }
                    elementProduct.name = res.data.result[index].name
                    elementProduct.id = res.data.result[index].id
                    this.values.push(elementProduct)
                  }
                  cb(this.values)
                }
              })
            }
          },
          sourceHandleSelect ($event) {
            console.log($event)
            this.editForm.sourceProductId = $event.id
            this.editForm.sourceProductName = $event.name
          },
          // 输入后匹配输入建议
          targetProductSearch (queryString, cb) {
            if (queryString) {
              getSearchProductlist({
                selectValue: queryString,
                categoryId: this.editForm.targetCategoryId
              }).then((res) => {
                if (res.data.code === '200') {
                  this.values = []
                  for (let index = 0; index < res.data.result.length; index++) {
                    const elementProduct = {
                      name: '',
                      id: ''
                    }
                    elementProduct.name = res.data.result[index].name
                    elementProduct.id = res.data.result[index].id
                    this.values.push(elementProduct)
                  }
                  cb(this.values)
                }
              })
            }
          },
          targetHandleSelect ($event) {
            console.log($event)
            this.editForm.targetProductId = $event.id
            this.editForm.targetProductName = $event.name
          },
            close () {
                this.editVisible = false
            },
            doSubmit () {
                this.$refs['editForm'].validate((valid) => {
                    if (valid) {
                        save(this.editForm).then((res) => {
                            if (res.data.code === '200') {
                                this.$message({
                                    message: '编辑成功',
                                    type: 'success'
                                })
                                this.editVisible = false
                                this.$emit('refreshDataList')
                            }
                        })
                    }
                })
            }
        },
        mounted () {
          this.getTreeData(0,null)
        }
    }
</script>
<style lang="scss" scoped>
    ::v-deep .el-dialog{
    .el-form{
    .el-input__inner{
        width: 320px;
    }
    .inputAppend-wrapper{
    .el-input__inner{
        width: 282px;
    }
    }
    }
    }
</style>
